<template lang="pug">
  .body
    .nav
      .top_drag
      .userinfo(@click='userinfo')
        .img
        h1 登录QQ音乐
        p 听我想听的歌
      .alllist
        .list
          .title 音乐馆
          .item.active
            .icon
            span 精选
          .item
            .icon
            span 排行
          .item
            .icon
            span 歌单
          .item
            .icon
            span 电台
          .item
            .icon
            span MV
        .list
          .title 我的音乐
          .item
            .icon
            span 我喜欢
          .item
            .icon
            span 本地歌曲
          .item
            .icon
            span 下载歌曲
          .item
            .icon
            span 播放历史
    .main_body
      .top_drag
      .navigation_bar
      .content
    .footer
</template>
<script>
export default {
  components: {
  },
  data () {
    return {
      loginwin: null
    }
  },
  methods: {
    userinfo () {
      if (!this.loginwin) {
        const BrowserWindow = this._BrowserWindow
        this.loginwin = new BrowserWindow(
          {
            title: '登录',
            width: 300,
            height: 380,
            show: false,
            titleBarStyle: 'hidden',
            resizable: false,
            maximizable: false,
            minimizable: false
          }
        )
        this.loginwin.on('closed', () => {
          this.loginwin = null
        })

        this.loginwin.loadURL(this.__winURL + '/#/login')
        this.loginwin.show()
      } else {
        this.loginwin.focus()
      }
    }
  },
  created () {
    console.log(global.winURL)
  }
}
</script>

<style lang="stylus" scoped>
@import './../../assets/css/var'
.body
  display flex
  flex-flow row nowrap
  justify-content flex-start
.nav
  -webkit-app-region no-drag
  flex 0 0 200px
  width 200px
  height 100vh
  padding 45px 12px 60px
  box-sizing border-box
  background rgba(240,240,240,0.98)
  display flex
  flex-flow column nowrap
  justify-content flex-start
  .userinfo
    flex 0 0 110px
    width 100%
    height 110px
    display flex
    flex-flow column nowrap
    justify-content flex-start
    align-items center
    border-bottom 1px solid $elSilver
    .img
      width 48px
      height 48px
      border-radius 50%
      background #cecece
      cursor pointer
    h1
      font-size 13px
      margin-top 10px
      color $Black
    p
      font-size 11px
      margin-top 10px
      color $elBlack
      font-weight 350
  .alllist
    flex 1
    overflow-y auto
    margin 0 -12px
    padding 0 12px
  .list
    padding 20px 0 6px
    .title
      font-size 11px
      padding 6px
      font-weight 400
      color $elBlack
    .item
      border-radius 2px
      height 28px
      padding 0 6px
      display flex
      flex-flow row nowrap
      justify-content flex-start
      align-items center
      &.active
        background $Green
        span
          color $White
        .icon
          background $White
      .icon
        width 16px
        height 16px
        margin-right 5px
        background $elBlack
      span
        font-size 13px
        font-weight 400
.main_body
  -webkit-app-region no-drag
  flex 1
  right 0
  top 0
  width 780px
  height 100vh
  overflow hidden
  background #fff
  display flex
  flex-flow column nowrap
  justify-content flex-start
  .navigation_bar
    flex 0 0 45px
    width 100%
    height 45px
    border-bottom 1px solid $elSilver
  .content
    flex 1
    margin-bottom 60px
    overflow-y auto
.footer
  position fixed
  width 100vw
  height 60px
  left 0
  bottom 0
  border-top 1px solid $elSilver
  background rgba(255,255,255,0.3)
</style>
